<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search-wrapper">
      <a-input v-model="searchKeyword" placeholder="请输入菜品名称" />
      <a-button type="primary" @click="searchDishes">搜索</a-button>
      <!-- 每页条数选择器 -->
      <a-select v-model="pageSize" @change="handlePageSizeChange">
        <a-option v-for="size in [10, 20, 30]" :key="size" :value="size">
          {{ size }} 条/页
        </a-option>
      </a-select>
    </div>
    <a-row
      class="dish-item"
      :gutter="24"
      align="center"
      justify="center"
      v-for="item in dishes"
      :key="item.dishId"
    >
      <a-col :span="1">
        <div class="dish-name"> {{ item.dishId }}</div>
      </a-col>
      <a-col :span="3">
        <div class="image-wrapper">
          <img
            :src="item.dishPicture"
            :style="{ width: '100px', height: '100px' }"
            @error="handleImageError($event, item)"
            alt="菜品图片"
          />
        </div>
      </a-col>
      <a-col :span="8">
        <div class="dish-name">菜名: {{ item.dishName }}</div>
      </a-col>
      <a-col :span="2">
        <div class="dish-name"> 收藏数：{{ item.dishDianzan }}</div>
      </a-col>
      <a-col :span="8">
        <a-popover position="right">
          <a-button type="primary" class="detail-btn">详情</a-button>
          <template #content>
            <p class="dish-desc">{{item.dishDescribe}}</p>
          </template>
        </a-popover>
      </a-col>
      <a-col :span="1">
        <div>
          <a-button size="mini" type="primary" status="danger" class="update-btn" @click="updateDish(item.dishId)">
            修改
          </a-button>
        </div>
      </a-col>
      <a-col :span="1">
        <div>
          <a-popconfirm @ok="deleteDish(item.dishId)" content="Are you sure you want to delete?" >
            <a-button size="mini" type="primary" status="danger" class="delete-btn" >
               删除
            </a-button>
          </a-popconfirm>
        </div>
      </a-col>
    </a-row>
    <!-- 分页组件 -->
    <a-pagination
      v-if="totalRecords > 0"
      :current="currentPage"
      :page-size="pageSize"
      :total="totalRecords"
      @change="handlePageChange"
    />
  </div>
</template>

<script>
import { getUserList, searchDishesApi } from '../../api/requestList.js';
import { useRouter } from 'vue-router'; // 导入路由钩子
import { deleteDish } from '../../api/dish.ts';
export default {
  data() {
    return {
      dishes: [],
      defaultImage: '', // 设置默认图片路径
      searchKeyword: '', // 搜索关键词
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      totalRecords: 0 // 总记录数
    };
  },
  setup() {
    const router = useRouter(); // 获取路由实例
    return { router };
  },
  methods: {
    deleteDish(dishId) {
      console.log(dishId);
      // 这里可以添加删除菜品的具体逻辑
      deleteDish(dishId).then((res) => {
        console.log(res);
        this.loadDishes();
      })
    },
    updateDish(dishId) {
      this.router.push({ name: 'updateDish', query: { dishId: dishId } });
    },
    handleImageError(event, item) {
      event.target.src = this.defaultImage; // 图片加载失败时显示默认图片
    },
    searchDishes() {
      this.currentPage = 1; // 搜索时重置为第一页
      if (this.searchKeyword) {
        searchDishesApi(this.currentPage, this.pageSize, this.searchKeyword)
          .then((res) => {
            let getlist = res.data.data;
            console.log(getlist);
            this.dishes = getlist.records;
            this.totalRecords = getlist.total; // 更新总记录数
          })
          .catch((error) => {
            console.error('搜索菜品列表失败:', error);
            // 可以在这里添加错误提示信息
          });
      } else {
        // 如果搜索关键词为空，加载全部菜品列表
        this.loadDishes();
      }
    },
    loadDishes() {
      getUserList(this.currentPage, this.pageSize)
        .then((res) => {
          let getlist = res.data.data;
          this.dishes = getlist.records;
          this.totalRecords = getlist.total; // 更新总记录数
        })
        .catch((error) => {
          console.error('获取菜品列表失败:', error);
          // 可以在这里添加错误提示信息
        });
    },
    handlePageChange(page) {
      this.currentPage = page;
      if (this.searchKeyword) {
        this.searchDishes();
      } else {
        this.loadDishes();
      }
    },
    handlePageSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 切换每页条数时重置为第一页
      if (this.searchKeyword) {
        this.searchDishes();
      } else {
        this.loadDishes();
      }
    }
  },
  mounted() {
    this.loadDishes();
  }
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f5f6fa;
  padding: 20px;
  min-height: 100vh;

  .search-wrapper {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
  }

  .dish-item {
    background: white;
    padding: 20px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .image-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        border-radius: 8px;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    .dish-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-top: 8px;
    }

    .detail-btn {
      background-color: #4080ff;
      border: none;

      &:hover {
        background-color: #165DFF;
      }
    }

    .delete-btn {
      background-color: #f53f3f;
      border: none;

      &:hover {
        background-color: #cb2634;
      }
    }
    .update-btn {
      background-color: #165DFF;
      border: none;

      &:hover {
        background-color: #0033cc; // 修改悬停背景颜色
      }
    }
    .dish-desc {
      color: #ff69b4;
      font-size: 14px;
      line-height: 1.5;
      max-width: 300px;
      word-break: break-word;
    }
  }

  // 分页组件样式
  .arco-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .container {
    padding: 10px;

    .dish-item {
      padding: 10px;

      .image-wrapper img {
        width: 80px;
        height: 80px;
      }

      .dish-name {
        font-size: 14px;
      }
    }
  }
}
</style>